<template>
  <div
    :style="{
      width: Number(size) + 4 + 'px',
      height: Number(size) + 4 + 'px'
    }"
    class="icon-bg flex items-center justify-center rounded"
    :class="showBg ? 'cursor-pointer hover:bg-blue-100' : ''"
  >
    <svg
      class="icon-svg"
      :class="iconClass"
      :style="{
        width: size + 'px',
        height: size + 'px',
        color: color
      }"
      aria-hidden="true"
    >
      <use :xlink:href="symbolId" :stroke-width="strokeWidth" />
    </svg>
  </div>
</template>
<script setup>
import { computed } from "vue";
const props = defineProps({
  prefix: {
    type: String,
    default: "icon"
  },
  name: {
    type: String,
    required: true
  },
  color: {
    type: String
  },
  // 样式
  iconClass: {
    type: String,
    default: ""
  },
  size: {
    type: [Number, String],
    default: 14
  },
  // 线条的粗细
  strokeWidth: {
    type: [String, Number],
    default: 4
  },
  showBg: {
    type: Boolean,
    default: false
  }
});

const symbolId = computed(() => `#${props.prefix}-${props.name}`);
</script>

<style scoped>
.icon-svg {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  overflow: hidden;
  fill: currentColor;
  /* stroke: currentColor; */
}
</style>
